<template>
    <div class="wheelPlanting" v-if='list.length >= num && list.length > 0'> 
        <div class='jiatou jiatouLeft' @click="clickLeft">左</div>
        <div class='jiatou jiatouRight' @click="clickRight">右</div>
        <div class='showWindow'>
            <ul class="clearfix carouselUl">
                <li v-for='(item,index) in list'>{{index}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // num: 6,
            // list: 20,
            index: 0
        }
    },
    props:{
        num: Number,
        list: Array,
    },
    mounted() {
        if (this.list.length < this.num || this.num == 0) {
            console.error('页面传入参数有误')
            return
        }
        let wheelPlantingLiWidth = document.getElementsByClassName('carouselUl')[0].firstChild.clientWidth
        let wheelPlanting = document.getElementsByClassName('wheelPlanting')[0]  
        wheelPlanting.style.width  = wheelPlantingLiWidth*this.num + 'px'
    },
    methods: {
        clickRight() {
            let wheelPlantingLiWidth = document.getElementsByClassName('carouselUl')[0].firstChild.clientWidth
            let carouselUl = document.getElementsByClassName('carouselUl')[0]
            ++ this.index
            if (this.index >= this.list.length-this.num + 1) {
                return this.index = this.list.length-this.num 
            }
            carouselUl.style.transform = `translate(-${wheelPlantingLiWidth*this.index}px)`
        },
        clickLeft() {
            let wheelPlantingLiWidth = document.getElementsByClassName('carouselUl')[0].firstChild.clientWidth
            let carouselUl = document.getElementsByClassName('carouselUl')[0]
            if (this.index <= 0) {
                return this.index = 0
            }
            -- this.index 
            carouselUl.style.transform = `translate(-${wheelPlantingLiWidth*this.index}px)`
        }
    }
}
</script>

<style lang="scss" scoped>
    .wheelPlanting{
        overflow: hidden;
        padding: 0 60px;
        margin: 0 auto;
        background-color: red;
        position: relative;
        height: 100%;
        .showWindow{
            overflow: hidden;
            background-color: #a8a8d0;
        }
        .jiatou{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .jiatouLeft{
            position: absolute;
            left:20px;
            cursor: pointer;
        }
        .jiatouRight{
            position: absolute;
            right:20px;
            cursor: pointer;
        }
        .carouselUl{
            margin: 0 auto;
            transition: all .5s;
        }
        ul{
            font-size: 0;
            white-space:nowrap;
            li{
                font-size: 18px;
                width: 200px;
                // height: 100px;
                // line-height: 100px;
                display: inline-block;
            }
        }
    }


</style>


